<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>index</title>
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/index.less">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/APlayer.min.css">
</head>

<body>
  <header>
   
    <img src="" alt="" id="portrait">
    <div id="vessel">
      <a href='log.html' class="" id="codename">亲，请登录</a>
      <div id="menu" class="none layui-anim layui-anim-down">
        <div id="person" class="info" style="height: 40px;border: 1px solid black;line-height: 40px;">个人中心</div>
        <div id="name" class="info width_half">1</div>
        <div id="gender" class="info width_half">2</div>
        <div id="telephone" class="info">3</div>
        <div id="email" class="info">4</div>
        <div id="country" class="info width_half">5</div>
        <div id="city" class="info width_half">6</div>
        <div id="words" class="info" style="height: 100%;line-height: 40px;margin: 40px 0px;border-bottom: none;"></div>
        <div id="exit" class="info" style="height: 40px;border: 1px solid black;line-height: 40px;">
          exit</div>
      </div>
      
    </div>
    <a href="register.html" class="" id="register">免费注册</a>
      <h1>各行业程序员数据</h1>
      <div class="showTime">当前时间：2023年6月<span id="time"></span></div>
  </header>
  <section class="mainbox">

    <div class="column">

      <div class="panel bar">
        <h2>
          柱状图-各行业程序员数量 <a href="javascript:;">2019</a>
          <a href="javacript:;"> 2020</a>
        </h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>

      <div class="panel line">
        <h2>折线图-学习变化</h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>

      <div class="panel pie">
        <h2>饼形图-工程师年龄分布</h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>

    </div>

    <div class="column">

      <div class="no">
        <div class="no-hd">
          <ul>
            <li>125811</li>
            <li>104563</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>程序员需求人数</li>
            <li>程序员供应人数</li>
          </ul>
        </div>
      </div>

      <div class="map">
        <div class="chart"></div>
        <div class="map1" ></div>
        <div class="map2"></div>
        <div class="map3" id="detail"></div>
      </div>

    </div>

    <div class="column">
      <div class="panel bar1">
        <h2>柱状图-开发技能</h2>
        <div class="chart"></div>
        <div class="panel-footer"><button id="add" class="layui-icon layui-icon-add-1"></button></div>
      </div>
      <div class="panel line1">
        <h2>折线图-公司人员流动</h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel pie1">
        <h2>饼形图-各地区程序员占比</h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
    </div>

  </section>
<div id="aplayer"></div>
  <script src="js/APlayer.min.js"></script>
  <script src="js/jquery-3.6.3.js"></script>
  <script src="js/cloudsAPI.js"></script>
  <script src="js/flexible.js"></script>
  <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
  <script src="js/index.js"></script>

  <script>
    (function (fn) {
      fn();
      setInterval(fn, 1000);
    })(function () {
      var dt = new Date();
      document.querySelector(".showTime span").innerHTML =
        dt.getDate() + "日-" +
        dt.getHours() + "时" +
        dt.getMinutes() + "分" +
        dt.getSeconds() + "秒";
    });
  </script>
</body>

</html>